<template>
  <div>
    <el-tree-select
      :node-key="nodeKey"
      :model-value="modelValue"
      :data="treeSelectData"
      :expand-on-click-node="expandOnClickNode"
      :check-strictly="checkStrictly"
      :props="treeProps"
      :filterable="filterable"
      :clearable="clearable"
      :placeholder="placeholder"
      :multiple="multiple"
      @change="confirm"
    >
    </el-tree-select>
  </div>
</template>
<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    modelValue: any;
    treeSelectData: string[];
    nodeKey?: string;
    treeProps?: object;
    placeholder?: string;
    clearable?: boolean;
    filterable?: boolean;
    checkStrictly?: boolean;
    expandOnClickNode?: boolean;
    multiple?: boolean;
  }>(),
  {
    nodeKey: "id",
    modelValue: "",
    placeholder: "",
    clearable: true,
    filterable: true,
    expandOnClickNode: true, // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
    checkStrictly: false, // 父子组件不关联 // 同时设置expandOnClickNode checkStrictly 可以任选每一个等级
    treeProps: () => {
      return {
        label: "name",
      };
    },
  }
);
const confirm = (id: any) => {
  emits("confirm", id);
  setTimeout(() => {
    emits("update:modelValue", id);
  }, 0);
};

const emits = defineEmits(["confirm", "update:modelValue"]);
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>
